<template>
	<view class="material-uploader">
		<u-button type="primary" :text="title" @click="onClick"></u-button>
		<u-popup :show="showProgress" :closeOnClickOverlay="false" :round="10" mode="center">
			<view class="material-uploading">
				<view class="material-uploading__file" v-for="(file, index) in files" :key="index">
					<view class="-name f-22">{{file.name}} - {{file.size}}</view>
					<u-line-progress :percentage="file.progress" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Upload from './upload.js'
	export default {
		name: "material-uploader",
		mixins: [Upload],
		props: {
			type: {
				type: String,
				default: 'image'
			},
		},
		computed: {
			title: function() {
				return this.type === 'video' ? '上传视频' : (this.type === 'image' ? '上传图片' : '上传文件');
			}
		},
		methods: {
			onClick: function() {
				if (this.type === 'image') {
					this.uploadImages();
				} else if (this.type === 'video') {
					this.uploadVideos();
				} else {
					this.uploadFiles();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.material-uploading {
		padding: 20rpx 26rpx;

		.material-uploading__file {
			margin-bottom: 20rpx;

			.-name {
				line-height: 60rpx;
			}
		}
	}
</style>
